<template>
  <div v-bind="$attrs" class="m-4 mr-0 overflow-hidden bg-white">
    <BasicTree
      title="文件管理"
      toolbar
      search
      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
      :clickRowToExpand="true"
      :treeData="treeData"
      :fieldNames="{ key: 'id', title: 'title' }"
      :beforeRightClick="renderContent"
      @select="handleSelect"
    />
  </div>
  <FileModal @register="registerModal" @success="handleSuccess" />
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { BasicTree, TreeItem, ContextMenuItem } from '@/components/Tree';
  import { useModal } from '@/components/Modal';
  import FileModal from './FileModal.vue';
  import { getCategoryList, deleteCategory } from '@/api/app/uploadPictures';

  export default defineComponent({
    name: 'FileTree',
    components: { BasicTree, FileModal },

    emits: ['select'],
    setup(_, { emit }) {
      const treeData = ref<TreeItem[]>([]);
      const [registerModal, { openModal }] = useModal();

      async function fetch() {
        const { list }: any = await getCategoryList();
        treeData.value = [{ id: 0, key: 0, title: '全部图片' }, ...list] as unknown as TreeItem[];
      }

      function renderContent(node: any): ContextMenuItem[] {
        // 去掉‘全部图片‘右键
        // if (!node.id) return [];
        return [
          {
            label: '新增',
            icon: 'ant-design:folder-add-outlined',
            divider: true,
            handler: () => {
              console.log('点击了新增', node, node.id);
              openModal(true, {
                isUpdate: false,
              });
            },
          },
          {
            label: '修改',
            icon: 'ant-design:edit-outlined',
            divider: true,
            handler: () => {
              console.log('点击了新增', node, node.id);
              // message.info('删掉重新加吧,明天有时间完善功能！');
              openModal(true, {
                node,
                isUpdate: true,
              });
            },
          },
          {
            label: '删除',
            handler: () => {
              console.log('点击了删除', node);
              Modal.confirm({
                title: '确认删除?',
                content: '确认删除名称为：“' + node.name + '” 的分类！',
                okText: '删除',
                okType: 'danger',
                cancelText: '取消',
                async onOk() {
                  await deleteCategory(node.id).then(() => {
                    message.success('删除成功');
                    fetch();
                  });
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            },
            icon: 'ant-design:delete-twotone',
          },
        ];
      }

      function handleSuccess({ isUpdate, values }) {
        if (isUpdate) {
          console.log(values, '1');
        } else {
          console.log(values, '2');
        }
        fetch();
      }

      function handleSelect(keys) {
        emit('select', keys[0]);
      }

      onMounted(() => {
        fetch();
      });

      return {
        treeData,
        registerModal,
        handleSelect,
        renderContent,
        handleSuccess,
      };
    },
  });
</script>
